<template>
  <div>
    <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />

    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
   
  </div>
</template>
<script>
import vod from '@/api/vod'
import courseApi from "@/api/course";
import cookie from "js-cookie";

export default {
  //使用此语法引入第三方组件
    head() {
    // 引入js,css
    return {
      script: [
        { src: '/aliplayercomponents-1.0.8.min.js' },
      ]
    }
  },
    asyncData({ params, error }) {
       return vod.getPlayAuthById(params.vid)
        .then(response => {
            return { 
                playAuth: response.data.data.PlayAuth,
                vid: params.vid
            }
           
        })
    },
    mounted() {
        const saveTime = function (memoryVideo,currentTime) {
          localStorage.setItem(memoryVideo, currentTime); 
        }

        const getTime = function (memoryVideo) {
          //return返回的是自定义起播时间 
          return localStorage.getItem(memoryVideo)
        }
        new Aliplayer({
            id: 'J_prismPlayer',
            vid: this.vid, // 视频id
            playauth: this.playAuth, // 播放凭证
            encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            width: '100%',
            height: '500px',
            autoplay: false,
            isLive: false,
            components: [{
              name: 'MemoryPlayComponent',
              type: AliPlayerComponent.MemoryPlayComponent,
              args:[false,getTime,saveTime]
            },
            {
              name: 'RateComponent',
              type: AliPlayerComponent.RateComponent
            }   
            ]
        }, function(player) {
            console.log('播放器创建成功')
        })
    }

}
</script>